<template>
  <div ref="canvas"></div>
</template>

<script >
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import buildingTextur from "../assets/QJ84.jpg";

export default {
  mounted() {
    // 创建 Three.js 场景
    const scene = new THREE.Scene();

    // 创建 Three.js 渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建相机
    const camera = new THREE.PerspectiveCamera(
      30,
      window.innerWidth / window.innerHeight,
      0.2,
      1000
    );
    camera.position.set(0, 10, 20);
    camera.lookAt(scene.position);

    // 添加灯光
    const ambientLight = new THREE.AmbientLight(0xffffff, 1);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
    directionalLight.position.set(0, 1, 1).normalize();
    scene.add(directionalLight);

    // 创建地面
    const groundGeometry = new THREE.PlaneGeometry(100, 100);
    const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x88bb88 });
    const ground = new THREE.Mesh(groundGeometry, groundMaterial);
    ground.rotation.x = -Math.PI / 2;
    scene.add(ground);
    //楼宇
    const group = new THREE.Group();
    const geometry1 = new THREE.BoxGeometry(35, 25, 20);
    const textureLoader1 = new THREE.TextureLoader();
    const buildingTexture1 = textureLoader1.load(buildingTextur);
    const smaterial1 = new THREE.MeshStandardMaterial({
      map: buildingTexture1, // 应用纹理贴图
      roughness: 0.7,
      metalness: 0.5,
    });

    const cube1 = new THREE.Mesh(geometry1, smaterial1);
    group.add(cube1);
    cube1.position.y = 13;

    const geometry2 = new THREE.BoxGeometry(8, 25, 10);
    const textureLoader2 = new THREE.TextureLoader();
    const buildingTexture2 = textureLoader2.load(buildingTextur);

    const smaterial2 = new THREE.MeshStandardMaterial({
      map: buildingTexture2, // 应用纹理贴图
      roughness: 0.7,
      metalness: 0.5,
    });
    const cube2 = new THREE.Mesh(geometry2, smaterial2);
    cube2.position.set(-13.5, 13, 15);
    group.add(cube2);
    const geometry3 = new THREE.BoxGeometry(8, 25, 10);
    const textureLoader3 = new THREE.TextureLoader();
    const buildingTexture3 = textureLoader3.load(buildingTextur);

    const smaterial3 = new THREE.MeshStandardMaterial({
      map: buildingTexture3, // 应用纹理贴图
      roughness: 0.7,
      metalness: 0.5,
    });
    const cube3 = new THREE.Mesh(geometry3, smaterial2);
    cube3.position.set(13.5, 13, 15);
    group.add(cube3);
    scene.add(group);

    // 添加鼠标交互控制
    const controls = new OrbitControls(camera, renderer.domElement);

    // 渲染循环
    function animate() {
      requestAnimationFrame(animate);

      // 更新控制器
      controls.update();

      renderer.render(scene, camera);
    }

    animate();
  },
};
</script>

<style>
#canvas {
  background-color: aliceblue;
}
</style>